import type { AudDialogShowParams } from '@/pages/components/Aud/AudDialog';
import AudDialog from '@/pages/components/Aud/AudDialog';
import React, { useImperativeHandle, useRef } from 'react';
import { useState } from 'react';
import { fjAndDgDataCode, intl } from '@/utils';
import DataGrid, { Column } from 'devextreme-react/data-grid';

const ErrorBounced: React.FC<any> = React.forwardRef((props: any, ref) => {
  const [visible, setVisible] = useState<boolean>(false);
  const diaParams = useRef<AudDialogShowParams>();

  useImperativeHandle(ref, () => ({
    show: async (params: AudDialogShowParams) => {
      diaParams.current = params;
      setVisible(true);
    },
    close: () => {
      setVisible(false);
    },
  }));

  const data = diaParams.current?.args.data;
  if (!data) {
    return
  }
  const type = Object.keys(data[0]).includes('dg') ? 'dg' : 'fj';

  return (
    <>
      <AudDialog
        ref={ref}
        visible={visible}
        title="错误信息列表"
        minWidth={500}
        width={500}
        height={500}
        {...props}
        showCancelButton={true}
        showOkButton={true}
        onOK={() => {
          setVisible(false);
          if (diaParams.current?.okCallback) {
            diaParams.current?.okCallback(data, data);
          }
        }}
        onCancel={() => {
          setVisible(false);
        }}
        onHiding={() => setVisible(false)}
      >
        <DataGrid
          dataSource={data}
          showBorders={true}
          columnAutoWidth={true}
          wordWrapEnabled={true}
          keyExpr={type}
          scrolling={{
            mode: 'standard',
            useNative: 'auto',
          }}
          height="100%"
        >
          <Column
            dataField={type}
            caption="错误名字"
            minWidth={100}
          />
          <Column
            caption="错误原因"
            dataField="code"
            cellRender={(cell) => {
              const { data } = cell;
              return (
                <>
                  {fjAndDgDataCode(data.code)}
                </>
              );
            }}
          />
        </DataGrid>
      </AudDialog>
    </>
  );
});

export default ErrorBounced;
